<template>
  <div class="content">
    <div class="login-page-box">
      <div class="left-space"></div>
      <div class="login-box">
        <div class="login—title">
          账号登录
        </div>
        <div class="qrcode-container">
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" @keyup.enter.native="toLogin(ruleFormRef)">
            <el-form-item class="login-form-item" prop="mobile">
              <img src="@/assets/img/name.png" alt="" class="icon" />
              <input type="text" placeholder="请输入您的账号或者手机号码" maxlength="50" class="input-item"
                v-model.trim="ruleForm.mobile" />
            </el-form-item>
            <el-form-item class="login-form-item" prop="password">
              <img src="@/assets/img/lock.png" alt="" class="icon" />
              <input :type="eyeState == 0 ? 'password' : 'text'" placeholder="请输入密码" maxlength="50"
                class="input-item pwd" v-model.trim="ruleForm.password" />
              <img :src="eyeState == 0 ? eye : openEye" alt="" class="icon-pwd" @click="clickEye" />
            </el-form-item>
            <el-form-item class="login-form-item" prop="store_id">
              <img src="@/assets/img/name.png" alt="" class="icon" />
              <input type="text" placeholder="请输入驾校ID" maxlength="50" class="input-item"
                v-model.trim="ruleForm.store_id" />
            </el-form-item>
          </el-form>

          <div class="flex flex-align-center flex-justify-between pwd-options">
            <div class="flex flex-align-center">
              <el-checkbox v-model="isChecked" name="type" class="custom-checkbox"></el-checkbox>
              <div class="marL8">记住密码</div>
            </div>
          </div>
          <div style="text-align: center; margin-top: 46px">
            <button class="btn" @mousemove="handleMouseMove" @mouseleave="resetRipple" @click="toLogin(ruleFormRef)"
              :disabled="loginLoading">
              <slot>立即登录</slot>
              <span class="ripple" :style="rippleStyle"></span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive, onMounted } from 'vue'
import openEye from '@/assets/img/openEye.png'
import eye from '@/assets/img/eye.png'
import { login } from '@/api/userApi'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useUserStore } from '@/store/user'

const router = useRouter()
const eyeState = ref(0)
const isChecked = ref<boolean>(false)
const route = useRoute()
const ruleForm = reactive({
  mobile: '',
  password: '',
  store_id: route.query.store_id ? route.query.store_id : ''
})
interface RuleForm {
  mobile: string
  password: string
  store_id: string
}
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
  mobile: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 11, max: 11, message: '请输入正确的账号格式', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  store_id: [
    { required: true, message: '请输入驾校ID', trigger: 'blur' }
  ],
})

const userStore = useUserStore()

// 新增登录loading状态，防止重复点击
const loginLoading = ref(false)

// 页面加载时自动清除token
onMounted(() => {
  userStore.clearToken()
  localStorage.removeItem('store_id')
  console.log('登录页面已自动清除token')
})

const toLogin = async (formEl: FormInstance | undefined) => {
  if (loginLoading.value) return
  if (!formEl) return
  loginLoading.value = true
  try {
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        const res = await login(String(ruleForm.store_id), {
          mobile: ruleForm.mobile,
          password: ruleForm.password
        })
        if (res.code === '00000') {
          // 假设 token 在 res.data.token
          userStore.setToken(res.data.accessToken, res.data.refreshToken)
          router.push({
            name: 'home',
          })
          localStorage.setItem('store_id', String(ruleForm.store_id))
          ElMessage.success('登录成功')
        }
      } else {
        console.log('error submit!', fields)
      }
    })
  } finally {
    loginLoading.value = false
  }
}

const clickEye = () => {
  eyeState.value = eyeState.value === 0 ? 1 : 0
}
const rippleStyle = ref({
  left: '0',
  top: '0',
  opacity: '0',
  width: '0',
  height: '0',
})

const handleMouseMove = (e: any) => {
  const rect = e.target.getBoundingClientRect()
  const x = e.clientX - rect.left
  const y = e.clientY - rect.top

  rippleStyle.value = {
    left: `${x}px`,
    top: `${y}px`,
    opacity: '1',
    width: '200px',
    height: '200px',
  }
}

const resetRipple = () => {
  rippleStyle.value.opacity = '0'
}
</script>
<style scoped lang="scss">
.content {
  width: 100vw;
  min-height: 100vh;
  background: url('@/assets/img/logining_bg.png') no-repeat center center;
  background-size: cover; // 让图片始终铺满容器
  background-attachment: fixed; // 可选，背景随页面滚动不动
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.login-page-box {
  display: flex;
  width: 100%;
  max-width: 1440px;
  /* 最大宽度限制 */
  justify-content: center;
  position: relative;
}

.left-space {
  flex: 1;
  max-width: 800px;
  /* 与登录框的margin-left保持一致 */
}

.login-box {
  width: 100%;
  max-width: 440px;
  height: auto;
  min-height: 500px;
  background: hsla(0, 0%, 100%, 0.8);
  box-shadow: 0 2px 80px 5px rgba(19, 29, 107, 0.06);
  border-radius: 12px;
  border: 2px solid #fff;
  backdrop-filter: blur(50px);
  padding: 20px;
  box-sizing: border-box;
  margin: 0;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .content {
    padding: 8px;
    // 其他小屏幕下的样式
  }

  .login-page-box {
    flex-direction: column;
    padding: 0 20px;
  }

  .left-space {
    display: none;
  }

  .login-box {
    max-width: 100%;
    margin-left: 0;
    margin-top: 20px;
  }

  .btn {
    width: 100% !important;
    max-width: 336px;
  }
}

.qrcode-container {
  text-align: center;
  margin-bottom: 18px;
  margin-top: 40px;
}

.login-form-item {
  width: calc(100% - 100px);
  position: relative;
  font-size: 12px;
  margin: 0px auto 27px;
}

.icon {
  position: absolute;
  top: 50%;
  transform: translate3d(0px, -50%, 0px);
  cursor: pointer;
  left: 15px;
  width: 31px;
  padding-right: 10px;
  border-right: 1px solid rgba(32, 33, 36, 0.06);
}

.input-item {
  width: 100%;
  height: 52px;
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: rgb(36, 32, 32);
  line-height: 15px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(237, 239, 242);
  border-image: initial;
  padding: 0px 20px 0px 60px;
  transition: 0.1s linear;
}

.input-item:focus {
  border-color: #00c356;
  box-shadow: 0 0 5px rgba(7, 193, 96, 0.3);
  outline: none;
}

.input-item::placeholder {
  opacity: 0.6;
}

.icon-pwd {
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  width: 20px;
  right: 10px;
}

.pwd {
  padding: 0 30px 0 60px;
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
}

.pwd-options {
  margin: 0 50px;
  font-size: 14px;
}

.btn {
  position: relative;
  background-image: linear-gradient(135deg, #00c356, rgb(0 195 85 / 70%));
  border: none;
  color: #fff;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  box-shadow: 0 14px 30px hsla(0, 34%, 55%, 0.15);
  font-size: 14px;
  font-weight: 500;
  width: 336px;
  height: 52px;
  border-radius: 8px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ripple {
  position: absolute;
  background: radial-gradient(circle closest-side, rgba(0, 255, 248, 0.38), transparent);
  transform: translate(-50%, -50%);
  transition:
    opacity 0.3s ease,
    width 0.3s ease,
    height 0.3s ease;
  pointer-events: none;
  border-radius: 50%;
}

.marL8 {
  margin-left: 8px;
}

.custom-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #00c356;
  border-color: #00c356;
}

.custom-checkbox :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #00c356;
}

.login—title {
  text-align: center;
  margin-top: 20px;
  font-size: 20px;
}
</style>
